<template>
  <div class="container">
    <!-- <h2 :class="['abc','bcd']">组件的样式问题</h2> -->

    <h2 :class="{abc:true, thin:flag}">组件的样式问题</h2>
    <button @click="flag = !flag">切换类名</button>

    <p>这是app中的p</p>
    <my-left></my-left>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
export default {
  data() {
    return {
      flag:true
    }
  },
  components: { MyLeft },

}
</script>

<style lang="less" scoped>
.abc {
  color: green;
}
.thin {
  font-weight: 200;
}

.container {
  background-color: pink;
  h2 {
    font-size: 24px;
  }
  p {
    color: blue;
  }
}
.container /deep/ .chp {
  background-color: orange;
}
</style>